import React from 'react';
import Slider from 'react-slick';
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

import './style/';
import Setting_Tab from "./Setting_Tab";
import {Button,Icon,message,Alert,Carousel} from 'antd'
import {toJS} from 'mobx';
import {WeaTools, WeaDialog, WeaLocaleProvider} from "ecCom";

const getLabel = WeaLocaleProvider.getLabel;
class List extends React.Component {

    state = {
        visible:false,
        showNum:"3",
        bgColor:"#67F6D3",
        title:"通知公告",
        icon:"/spa/portal/images/defaultCustom/tzgg.png",
        docids:[],
        data: [],
        isSys:"1",
        imgs:[],
        showType:"1",
        refresh:false,
        bgTmd:"100",
        documentImageShowWay: "1",
        imgWidth:200,
        imgHeight:200,
        uniformity:0,
        setting:{
            navigationBarLocationType:'1',
            titleWidth:'200',
            titleHeight:'40',
            titleColor:'#ffffff',
            titleFontSize:"30",
            bgc:'#2195c1',
        }
    }

    setStateData =  (data)=>{
        this.setState(data);
    }

    changeDocids(){
        const arr = this.state.docids;
        let doicids="";
            arr.map((item) => {
                doicids = doicids+ item.id+',';
            })
        return doicids;
    }

    saveSetting= () =>{
       const docids = this.changeDocids();

        WeaTools.callApi('/api/portal/setinfo/saveset','POST',{
            jsonStr: JSON.stringify({"title":this.state.title,
                "shownum":this.state.showNum,
                "viewtype":this.state.viewType,
                "bgColor":this.state.bgColor+","+this.state.bgTmd,
                "icon":this.state.icon,
                "id":this.props.id,
                "docids":docids,
                "showType":this.state.showType,
                "listmore":[],
                "documentImageShowWay":this.state.documentImageShowWay,
                "imgWidth":this.state.imgWidth,
                "imgHeight": this.state.imgHeight,
                "uniformity":this.state.uniformity,
                "setting":JSON.stringify(this.state.setting),
            })
        }).then((result) =>{
            if(result.api_status==true){
                this.setState({visible:false});
                message.success(getLabel(83551,"保存成功！"),2);
                this.getDatas();
            }else {
                message.error(getLabel(84544,"保存失败！"),2);
            }
        })

        this.setState({visible: false});
    }

    TitleOnChange= (value) => {
        this.setState({title:value});
    }

    ShowNumChnage = (value) => {
        this.setState({showNum: value});
    }

    changebgColor = (value) => {
        this.setState({bgColor: value});
    }

    changeDoc = (datas) =>{
    this.setState({docids: datas});
    }

    changeIcon = (value) => {
        this.setState({icon:value});
    }

    getDatas = () => {
        WeaTools.callApi('/api/portal/setinfo/getset','GET',{
            "id":this.props.id
        }).then((result) => {
            if(result.api_status==true&&result.isCz==true){
                let bg = result.setting.bgColor.split(',');
                this.setState({
                    title:result.setting.title,
                    showNum:result.setting.shownum,
                    viewType:result.setting.viewtype,
                    bgColor:bg[0],bgTmd:bg[1],
                    icon:result.setting.icon,
                    docids:result.docids,
                    data:result.datas,
                    isSys: result.isSys,
                    listmore: result.listmore,
                    imgs:result.imgs,
                    showType: result.setting.showType,
                    documentImageShowWay:result.setting.documentImageShowWay,
                    imgWidth:parseInt(result.setting.imgWidth),
                    imgHeight:parseInt(result.setting.imgHeight),
                    uniformity:result.setting.uniformity,
                    setting:JSON.parse(result.setting.setting)

                });
                  // if(result.setting.showType=="2"){
                  //     this.setState({imgs:result.imgs});
                  // }
            }else if(result.api_status==true&&result.isCz==false){

            }
        })

    }

    onCancel= ()=> {
        this.getDatas();
        this.setState({visible: false});
    }

    urlTiaozhuan = (item) =>{
        const url=item.docsubject.link;
        window.open(url);
    }

    moreUrl = () => {
        const more = {"orderby":[],"docCatalogIds":this.state.listmore,"order":[]};
        window.open("/spa/document/static/index.html#/main/document/more?fromwhere=jsonFilter&jsonstr="+escape(JSON.stringify(more)));
    }




    settingDia = () => {
        this.setState({visible:true});
    }

    changeViewType = (value) => {
        this.setState({showType:value});
    }

    changeBgTmd = (value) => {
        this.setState({bgTmd:value});
    }

    changeHx = () => {

        let tmd = parseInt(this.state.bgTmd);

        if(tmd=='NaN'){
            tmd = 100;
        }
        const hxtmd = parseInt((tmd/100)*255);
        let temp = hxtmd.toString(16);
        if(hxtmd<10){
            temp ="0"+ temp;
        }
        return temp;

    }



    componentDidMount(){
        this.getDatas();
    }

    componentDidUpdate() {
        const {id} = this.props.id
        const {documentImageShowWay,data,setting,} = this.state
        const {navigationBarLocationType} = setting
        let w = $("#lr_document_"+id).width()
        let h = $("#lr_document_"+id).height()

        if(navigationBarLocationType=="1"){
            $("#lr_document_" + id + " .lr_document_carousel_li_"+id).width(w)
            $("#lr_document_" + id + " .lr_document_carousel_li_"+id).height(h)
        }else if(navigationBarLocationType=="2"){
            let w = $("#lr_documen2_"+id).width()
            let h = $("#lr_document2_"+id).height()
            $("#lr_document2_" + id + " .lr_document_carousel_li2_"+id).width(w)
            $("#lr_document2_" + id + " .lr_document_carousel_li2_"+id).height(h)

        }



        for(let index in data){
            const width = $(".lr_document_carousel_img_"+id+"_"+index).width()
            const height = $(".lr_document_carousel_img_"+id+"_"+index).height()
            const w = $(".lr_document_carousel_img_"+id+"_"+index).parent().width()
            const h = $(".lr_document_carousel_img_"+id+"_"+index).parent().height()
            if(documentImageShowWay == 1){
                if(width/height > w/h){
                    $(".lr_document_carousel_img_"+id+"_"+index).css({width:'auto',height:"100%"})
                }else {
                    $(".lr_document_carousel_img_"+id+"_"+index).css({width:"100%",height:'auto'})
                }
            }else if(documentImageShowWay == 2){
                if(width/height > w/h){
                    $(".lr_document_carousel_img_"+id+"_"+index).css({width:"100%",height:'auto'})
                }else {
                    $(".lr_document_carousel_img_"+id+"_"+index).css({width:'auto',height:"100%"})
                }
            }else if(documentImageShowWay == 3){
                $(".lr_document_carousel_img_"+id+"_"+index).css({width:"100%",height:"100%"})
            }
        }
        if(navigationBarLocationType=="1"){
            let textDivWidth = $("#lr_document_" + id ).width()-($("#lr_document_" + id +" ul.slick-dots").width())-40;
            $(".lr_document_carousel_textDiv_"+id).css({width:textDivWidth+"px"})
            $("#lr_document_"+id+" .slick-initialized.slick-slider").css({'padding-bottom':'0px'})
            $("#lr_document_"+id+" .ant-carousel .slick-dots").css({width:'auto',right:'40px',bottom:'7px'})
        }else if(navigationBarLocationType == "2"){
            let textDivWidth = $("#lr_document2_" + id ).width()
            $(".text"+id).css({width:textDivWidth+"px"})
            $("#lr_document2_"+id+" .slick-initialized.slick-slider").css({'padding-bottom':'0px'})
            $("#lr_document2_"+id+" .ant-carousel .slick-dots").css({width:'100%',right:'0px',bottom:'10px'})
        }



       //被列表式1/2添加样式
        if(this.state.showType == 2){
            $(".lr_document_type_2_ul_"+id).css({width:$("#document_"+id).width()-$("#lr_document_type_2_"+id+" .zuotu").width()-40+"px"})

        }else if(this.state.showType == 1){
            $(".lr_document_type_2_ul_"+id).css({width:$("#document_"+id).width()-40+"px"})
        }

        let textDivWidth = $("#lr_document_" + id ).width()-($("#lr_document_" + id +" ul.slick-dots").width())-40;
        $(".lr_document_carousel_textDiv_"+id).css({width:textDivWidth+"px"})

        $("#lr_document_type_2_"+id +"  .ant-carousel .slick-slider").css({'padding-bottom':'0px'})
        $("#lr_document_type4_div_"+id).css({position:'relative','top': ($("#lr_document_type4_"+id).height()-$("#lr_document_type4_div_"+id).height())/2+"px"})



        if(this.state.uniformity ==1){
            let documentContainerWidth  = $("#document_"+id).width()
            let count = parseInt(documentContainerWidth / this.state.imgWidth)
            if(count > this.state.data.length){
                count = this.state.data.length;
            }else if(count<=0){
                count = 1;
            }
            if(count!= this.state.data.length){
                $("#lr_document_type4_div_"+id+" .slick-list .slick-track").css({transform:"translate3d(-756px, 0px, 0px)"})
                this.uniformityMover("lr_document_type4_div_"+id +" .slick-list .slick-track",-$(".lr_document_type4_a"+id).width()*this.state.data.length);
                $("#lr_document_type4_"+id).bind("mouseover",()=>{
                    console.info(111)
                    const timeOutId = this.timeOutId
                    if(timeOutId) {
                        clearInterval(timeOutId)
                    }
                })
                $("#lr_document_type4_"+id).bind("mouseout",()=>{
                    this.uniformityMover("lr_document_type4_div_"+id +" .slick-list .slick-track",-$(".lr_document_type4_a"+id).width()*this.state.data.length);
                })
            }


        }else{
            const timeOutId = this.timeOutId
            if(timeOutId){
                clearInterval(timeOutId)
                $("#lr_document_type4_div_"+id +" .slick-list .slick-track").css({left:"0px"})
            }
            $("#lr_document_type4_"+id).unbind("mouseover")
            $("#lr_document_type4_"+id).unbind("mouseout")
        }
        // $("#lr_document_type4_div_"+id +" .slick-list .slick-track").css()
    }

    uniformityMover = (constainerId,moverSize)=>{
        const timeOutId = this.timeOutId
        if(timeOutId){
            clearInterval(timeOutId)
        }
        this.timeOutId = setInterval(function(){
            let left =  parseInt($("#"+constainerId).css("left").split("px")[0])
            if(left > moverSize){
                $("#"+constainerId).css({left:left-1+"px"})
            }else {
                $("#"+constainerId).css({left:"0px"})
            }
        }.bind(this),20)
    }

    documentImageShowWayChange = (documentImageShowWay)=>{
        this.setState({
            documentImageShowWay
        })
    }

    imgOnload = (index)=>{
        const {id} = this.props.id
        const {documentImageShowWay,setting} = this.state
        const {navigationBarLocationType} = setting
        const width = $(".lr_document_carousel_img_"+id+"_"+index).width()
        const height = $(".lr_document_carousel_img_"+id+"_"+index).height()
        const w = $(".lr_document_carousel_img_"+id+"_"+index).parent().width()
        const h = $(".lr_document_carousel_img_"+id+"_"+index).parent().height()
        if(documentImageShowWay == 1){
            if(width/height > w/h){
                $(".lr_document_carousel_img_"+id+"_"+index).css({height:"100%"})
                const neww = $(".lr_document_carousel_img_"+id+"_"+index).width();

                $(".lr_document_carousel_img_"+id+"_"+index).css({'margin-left':-(neww-w)/2})
            }else {
                $(".lr_document_carousel_img_"+id+"_"+index).css({width:"100%"})
                const newH = $(".lr_document_carousel_img_"+id+"_"+index).height()
                $(".lr_document_carousel_img_"+id+"_"+index).css({'margin-top':-(newH-h)/2})

            }
        }else if(documentImageShowWay == 2){
            if(width/height > w/h){
                $(".lr_document_carousel_img_"+id+"_"+index).css({width:"100%"})
            }else {
                $(".lr_document_carousel_img_"+id+"_"+index).css({height:"100%"})
            }
        }else if(documentImageShowWay == 3){
            $(".lr_document_carousel_img_"+id+"_"+index).css({width:"100%",height:"100%"})
        }
        if(navigationBarLocationType == "1"){
            let textDivWidth = $("#lr_document_" + id ).width()-($("#lr_document_" + id +" ul.slick-dots").width())-40;
            $(".lr_document_carousel_textDiv_"+id).css({width:textDivWidth+"px"})

            $("#lr_document_"+id+" .slick-initialized.slick-slider").css({'padding-bottom':'0px'})
            $("#lr_document_"+id+" .ant-carousel .slick-dots").css({width:'auto',right:'40px',bottom:'7px'})
        }else if(navigationBarLocationType == "2"){
            let textDivWidth = $("#lr_document2_" + id ).width()
            $(".text"+id).css({width:textDivWidth+"px"})
            $("#lr_document2_"+id+" .slick-initialized.slick-slider").css({'padding-bottom':'0px'})
            $("#lr_document2_"+id+" .ant-carousel .slick-dots").css({width:'100%',right:'0px',bottom:'10px'})
        }



    }



    render() {
        const {id} = this.props.id
        const {visible,title,bgColor,data,showType,imgs,bgTmd,icon,setting} = this.state;
        const {navigationBarLocationType} = setting
        // const wid = $("#grid-stack-item-"+this.props.id).width();
       let isc = {};

        let display ="";
        if(this.props.isSetting==false){
            display="none";
        }


        const bgcolor = this.state.bgColor+this.changeHx();
        //调整列表式1还是列表式2
        let left =210;
        let lbs2 = "";
        if(showType=="1"){
            lbs2 = "none";
            left = 0;
        }
        let type4config = {
            autoShow: "1",
            button: "1",
            height: this.state.imgHeight,
            open: "0",
            showType: "2",
            speed: "20",
            width: this.state.imgWidth,
        }
        let imgStyle = {
            width: this.state.imgWidth >$("#document_"+id).width() ? $("#document_"+id).width():this.state.imgWidth   + 'px',
            height: this.state.imgHeight >$("#document_"+id).height() ? $("#document_"+id).height()-30:this.state.imgHeight  + 'px',
            margin: '0 auto'
        }
        let divStyle = {
            display:'inline-block',
            width: parseInt(this.state.imgWidth)  + 4 +'px',
            height:this.state.imgHeight  + 'px'
        }
        let type4data = data.map((item,index)=>{
            return {
                link: item.docsubject.link,
                name: item.docsubject.name,
                order: index,
                type: "2",
                url: item.images.length>0 ? item.images[0]:'/spa/portal/images/customContainerDefaultBgi.jpg',

            }

        })
        let sliderComs = type4data.map(item => {
                return  item.link != '' ? <a className={"lr_document_type4_a"+id} title={item.name} href={item.link} style={divStyle} target='_blank'><img src={item.url} alt="" style={imgStyle}/> <div style={{'text-align':'center',overflow: 'hidden','text-overflow':'ellipsis','white-space': 'nowrap',height:'30px','line-height':'30px','font-size':'16px',color:'black'}}>{item.name}</div></a>:
                    <div title={item.name} style={divStyle}><img src={item.url} alt="" style={imgStyle}/>
                        <div style={{'text-align':'center',overflow: 'hidden','text-overflow':'ellipsis','white-space': 'nowrap',height:'30px','line-height':'30px','font-size':'16px',color:'black'}}>{item.name}</div>
                    </div>
        })
        let documentContainerWidth  = $("#document_"+id).width()
        let count = parseInt(documentContainerWidth / this.state.imgWidth)
        if(count > type4data.length){
            count = data.length;
        }else if(count<=0){
            count = 1;
        }
        let settings = {
            className:'center',
            dots: false,
            infinite: true,
            autoplay: this.state.uniformity != 1 ? true:false,
            slidesToShow: count,
            slidesToScroll: 1,
            pauseOnHover:true,
            draggable: false,
        }

        if(this.state.uniformity != 1){
            settings.nextArrow = <SampleNextArrow button={'1'} eid={id}/>
            settings.prevArrow = <SamplePrevArrow button={'1'} eid={id}/>
            settings.autoplay = true
        }

        return (
            <div id={"document_"+id} className="portal-com-list" style={{"background-color":bgcolor}}>
                {

                }
                {
                    showType=="3"
                        ? (
                        navigationBarLocationType == "1"
                            ?(
                                <div id={"lr_document_"+id}  style={{width:'100%',height:'100%'}}>
                                    <Icon  className="list-setting-icon" onClick={this.settingDia} type="setting" theme="filled" style={{"display":display,color:'#57c5f7'}}/>
                                    <Carousel autoplay>
                                        {
                                            data.map((item,index)=>{
                                                return (
                                                    <div  className={"lr_document_carousel_li_"+id} style={{width:'100%',height: '100%'}}>
                                                        <img className={"lr_document_carousel_img_"+id+"_"+index} src={item.images.length>0 ? item.images[0]:'/spa/portal/images/customContainerDefaultBgi.jpg'} title={item.docsubject.name} style={{'vertical-align':'middle',margin:'0 auto','cursor':'pointer'}}  onLoad={()=>{this.imgOnload(index)}} onClick={()=>{window.open(item.docsubject.link)}}/>
                                                        <div style={{'background-color': 'black',opacity: '0.15',width:'100%',height:'40px',position: 'absolute',bottom: '0px'}}></div>
                                                        <div className={"lr_document_carousel_textDiv_"+id} title={item.docsubject.name} style={{width:'100%',height:'40px',lineHeight:'40px',position: 'absolute',bottom: '0px'}}><div style={{marginLeft:'30px',color: 'white','cursor':'pointer',overflow: 'hidden','text-overflow':'ellipsis','white-space': 'nowrap'}} onClick={()=>{window.open(item.docsubject.link)}}>{item.docsubject.name}</div></div>
                                                    </div>
                                                )
                                            })
                                        }
                                    </Carousel>
                                </div>
                            ) :(
                                navigationBarLocationType == "2"
                                    ?(
                                        <div  id={"lr_document2_"+id} className={"lr_document2_antd"} style={{width:'100%',height:'100%'}}>
                                            <Icon  className="list-setting-icon" onClick={this.settingDia} type="setting" theme="filled" style={{"display":display,color:'#57c5f7'}}/>
                                            <Carousel autoplay>
                                                {
                                                    data.map((item,index)=>{
                                                        return (
                                                            <div  className={"lr_document_carousel_li2_"+id} style={{width:'100%',height: '100%'}}>
                                                                <img className={"lr_document_carousel_img_"+id+"_"+index} src={item.images.length>0 ? item.images[0]:'/spa/portal/images/customContainerDefaultBgi.jpg'} title={item.docsubject.name} style={{'vertical-align':'middle',margin:'0 auto','cursor':'pointer'}}  onLoad={()=>{this.imgOnload(index)}} onClick={()=>{window.open(item.docsubject.link)}}/>
                                                                <div className={"text"+id}  style={{'letter-spacing':'2px',height:this.state.setting.titleHeight,lineHeight:this.state.setting.titleHeight,position: 'absolute',bottom: '65px'}}><div  title={item.docsubject.name} style={{'text-indent':'1em',margin:'0 auto',width:this.state.setting.titleWidth+"px",height:this.state.setting.titleHeight+"px",'font-size':this.state.setting.titleFontSize+"px",color:this.state.setting.titleColor,'background-color':this.state.setting.bgc,lineHeight:this.state.setting.titleHeight+"px",'cursor':'pointer',overflow: 'hidden','text-overflow':'ellipsis','white-space': 'nowrap'}}  onClick={()=>{window.open(item.docsubject.link)}}>{item.docsubject.name}</div></div>
                                                            </div>
                                                        )
                                                    })
                                                }
                                            </Carousel>
                                        </div>

                                    ):""
                            )

                        ) :  ""
                }
                {
                    showType=="4"
                        ?(
                            <div id={"lr_document_type4_"+id} style={{width:'100%',height:'100%'}}>
                                <Icon  className="list-setting-icon" onClick={this.settingDia} type="setting" theme="filled" style={{"display":display}}/>
                                <div id={"lr_document_type4_div_"+id}>
                                    <Slider  {...settings}>
                                        {sliderComs}
                                    </Slider>
                                </div>
                            </div>
                         ) :""
                }

                {
                    showType=="1" || showType=="2"
                        ?(
                            <div style={{width:'100%',height:'100%'}}>
                                <Icon  className="list-setting-icon" onClick={this.settingDia} type="setting" theme="filled" style={{"display":display}}/>
                                <div className="portal-com-list-content">
                                    <div className="portal-com-list-header">
                                        <img  style={{width:50,height:50,float:"left"}} src={icon} />
                                        <span className="portal-com-list-title" style={{ width: 130, height: 50,
                                            "line-height": 50,
                                            display: "inline-block","cursor": "pointer"}}>{title}</span>
                                        <span className="portal-com-list-more"   style={{"font-size":12}} >
                                            <span onClick={this.moreUrl}>{getLabel(385419,"更多>>")}</span></span>
                                    </div>
                                    <div className="portal-com-list-data">

                                            <div className="zuotu" style={{"display":lbs2}}>
                                                {showType=="2" ? <Carousel className="zoumadeng"   autoplay>
                                                    {imgs.map((item) => {
                                                        return (
                                                            <div><img  src={item} className="lunbo-item" onLoad={this.type2ImageOnload}/></div>
                                                        )
                                                    })}

                                                </Carousel>:""}


                                            </div>
                                            <ul  style={{"margin-left":left,top:'0px',"margin-top":" -157px"}}>
                                                {
                                                    data.length>0?(data.map((item) => {
                                                        return (
                                                            <li>
                                                        <span className="portal-com-list-title"
                                                              onClick={() => this.urlTiaozhuan(item)}
                                                              title={item.docsubject.name}>{item.docsubject.name}</span>
                                                            </li>
                                                        );
                                                    })):(
                                                        <ul style={{"font-size":"large","margin-top":" 157px"}}>{getLabel(83553,"暂无数据")}</ul>
                                                    )
                                                }
                                            </ul>
                                    </div>
                                </div>

                            </div>
                        ):""
                }



                <WeaDialog  style={{width: 900,height : 600}} visible={visible} onCancel={this.onCancel} title={getLabel(30747,"设置")} >
                    <div style={{position:"relative",height:600}}>
                        <Setting_Tab setStateData={this.setStateData}  documentImageShowWayChange={this.documentImageShowWayChange} titleChange={this.TitleOnChange}  ShowNumChnage={this.ShowNumChnage}  changeBgTmd={this.changeBgTmd}  changeViewType={this.changeViewType}    changeDoc = {this.changeDoc} changebgColor={this.changebgColor} changeIcon={this.changeIcon} settingInfo={this.state} />
                        <div style={{position:"absolute",bottom:7,"margin-left": "50%"}}>
                            <Button onClick={this.saveSetting} type="primary">{getLabel(33703,"确认")}</Button>
                            <Button onClick={this.onCancel} style={{"margin-left":10}}>{getLabel(31129,"取消")}</Button>
                        </div>
                    </div>
                </WeaDialog>

            </div>
        );
    }
}
function SampleNextArrow(props) {
    const { className, style, onClick, button } = props;
    if ('1' !== button) return <div/>;
    return (
        <div style={{verticalAlign: 'middle', width: '35px'}}>
            <div
                style={{ ...style, background: 'transparent url(/page/element/Picture/resource/image/next-horizontal_wev8.png) no-repeat 0 0', width: '32px',
                    height: '32px',"position": "absolute",
                    top: "50%",
                    "margin-top":"-16px",
                    right:"0px",
                    cursor: "pointer",}}
                onClick={onClick}
            />
            {/*<div id={`picturenext_${eid}`} className="picturenext" style={{cursor:'hand'}} ></div>*/}
        </div>
    );
}


function SamplePrevArrow(props) {
    const { className, style, onClick, button} = props;
    if ('1' !== button) return <div/>;
    return (
        <div
            style={{ ...style, background: 'transparent url(/page/element/Picture/resource/image/prev-horizontal_wev8.png) no-repeat 0 0', width: '32px',
                height: '32px',"position": "absolute",
                top: "50%",
                "margin-top":"-16px",
                cursor: "pointer",
                'z-index':'999'
            }}
            onClick={onClick}
        />);
}

export default List;